import { useState, useEffect } from 'react'
import { Tooltip } from 'antd'

function Line({ className, onLineSelect, selectedLine }) {
  const [activeLineId, setActiveLineId] = useState(selectedLine?.id || null)

  const lineList = [
    {
      id: 1,
      icon: '&#xe67c;',
      title: '直线',
      type: 'straight',
      hasArrow: false
    },
    {
      id: 2,
      icon: '&#xe67c;',
      title: '箭头直线',
      type: 'straight',
      hasArrow: true
    },
    {
      id: 3,
      icon: '&#xe67c;',
      title: '折线',
      type: 'polyline',
      hasArrow: false
    },
    {
      id: 4,
      icon: '&#xe67c;',
      title: '箭头折线',
      type: 'polyline',
      hasArrow: true
    }
  ]

  // 同步selectedLine的变化
  useEffect(() => {
    setActiveLineId(selectedLine?.id || null)
  }, [selectedLine])

  const handleLineClick = (line) => {
    setActiveLineId(line.id)
    onLineSelect && onLineSelect(line)
  }

  return (
    <div className={`line-container ${className}`}>
      <div className="line-header">
        <span>连接线</span>
      </div>
      <div className="line-content">
        {lineList.map(line => (
          <Tooltip placement="right" title={line.title}>
            <div
              key={line.id}
              className={`line-item ${activeLineId === line.id ? 'active' : ''}`}
              onClick={() => handleLineClick(line)}
            >
              <div className="line-icon">
                <i className="iconfont" dangerouslySetInnerHTML={{__html: line.icon}} />
                {line.hasArrow && <span className="arrow-indicator">→</span>}
              </div>
            </div>
          </Tooltip>
        ))}
      </div>
    </div>
  )
}

export default Line
